﻿/*
 * editable.js
 *
 * Enhances a DOM element so that the the can be editable.
 */
(function ($) {



    var methods = {
        reset: function () {
            var $container = $($(this).parents('.editable-container')[0]);

            var $data = this.data('editable');

            if (!$data)
                return;

            $container.find('.editable-text').html($data.originalvalue);

            // hide editor.
            $container.find('.editable-box').hide();

            // show original data.
            $container.find('.editable-original').show();
        },
        init: function (options) {
            var settings = {
                updateCompleteCallback: null, // parameters of original editable object and new value.
                closeOnBlur: false,
                validateOk: null,             // function to validate the editied value is ok.
                isNumberValue: false
            };

            settings = $.extend(settings, options);

            return this.each(function () {
                var $this = $(this);

                var $data = $this.data('editable');

                if (!$data) {
                    $data = $this.data('editable', { target: $this, originalvalue: $this.text(), settings: settings });
                }
                else
                    return; // already set up.

                // wrap text in span.
                var inputType = (settings.isNumberValue) ? 'number' : 'text';
                $this.html('<span class="editable-container" ><span class="editable-original" ><span class="editable-text">' + $this.html() + '</span><a href="#" class="open-edit"><span class="sprite">edit</span></a></span><span class="editable-box" style="display:none;"><input type="' + inputType + '" value="" /><a href="#" class="editable-done"><span class="sprite">ok</span></a></span></span>');

                //$this.find('a.open-edit').unbind('hqpad.editable.click');

                $this.find('a.open-edit').bind('click.hqpad-editable', function (event) {
                    event.preventDefault();

                    var $link = $(this);
                    var $container = $($link.parents('.editable-container')[0]);
                    var $data = $container.parent().data('editable');

                    // show editor.
                    $container.find('.editable-box').show();
                    $container.find('.editable-box input').val($data.originalvalue);

                    // hide original data.
                    $container.find('.editable-original').hide();

                    // save data.
                    $data.originalvalue = $container.find('.editable-text').text();
                    $container.parent().data('editable', $data);

                    //                    // set up close on blur.
                    //                    if (settings.closeOnBlur) {
                    //                        $container.find('.editable-box input').blur(function () {
                    //                            // get box val.
                    //                            var $container = $($(this).parents('.editable-container')[0]);
                    //                            var currentVal = $(this).val();

                    //                            if (currentVal == $data.originalvalue)
                    //                                return;

                    //                            // set back data.
                    //                            //$data.originalvalue = currentVal;
                    //                            //$container.data('editable', $data);

                    //                            $container.find('.editable-text').html(currentVal);

                    //                            // hide editor.
                    //                            $container.find('.editable-box').hide();

                    //                            // show original data.
                    //                            $container.find('.editable-original').show();

                    //                            if (settings.updateCompleteCallback)
                    //                                settings.updateCompleteCallback($data.target, currentVal);
                    //                        });
                    //                    }

                    // set up close on click ok.
                    $container.find('.editable-box .editable-done').bind('click.hqpad-editable-ok', function (event) {
                        event.preventDefault();
                        $(this).unbind('click.hqpad-editable-ok'); // remove this click handler to stop it being bound on open again.
                        var $container = $($(this).parents('.editable-container')[0]);

                        // get box val.
                        var currentVal = $container.find('.editable-box input').val();
                        var valueChanged = currentVal && (($data.settings.isNumberValue && currentVal >= 0) || !$data.settings.isNumberValue) && (currentVal != $data.originalvalue);

                        if (!valueChanged) {
                            // hide editor.
                            $container.find('.editable-box').hide();
                            // show original data.
                            $container.find('.editable-original').show();

                            $container.find('.editable-text').html($data.originalvalue);
                            return;
                        }

                        var ok = true;

                        if ($data.settings.validateOk && !$data.settings.validateOk($data.target, currentVal)) {
                            ok = false;
                        }

                        // hide editor.
                        $container.find('.editable-box').hide();

                        // show original data.
                        $container.find('.editable-original').show();

                        if (ok) {
                            $container.find('.editable-text').html(currentVal);
                            if ($data.settings.updateCompleteCallback)
                                $data.settings.updateCompleteCallback($data.target, currentVal);
                        }
                    });
                });
            });
        }
    };

    $.fn.editable = function (method) {

        // Method calling logic
        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || !method) {
            return methods.init.apply(this, arguments);
        } else {
            $.error('Method ' + method + ' does not exist on editable object.');
        }

    };

})(jQuery);